<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
<style>
.l-grid-row-cell{
	border-right:0;
	border-bottom: 1px dotted #cccccc;
}

.appendRowContent{
	text-align:left;
	color:red;
}
.l-grid-row-cell-appendRow{
	border-bottom: 1px solid #cdc9c3;
	height:45px;
}

</style>
</head>
<body>
<div class="page_content">
	<div class="groupTitle"><span>示例说明</span></div>
	附加行中可以放置长文本、比较多的操作按钮等内容。
	<div id="maingrid"></div>
</div>
<script type="text/javascript">
    var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
  {"bank":"平安银行","card":"平安银行信用卡（8497）","id":125,"billDay":"10日","repayDay":"28日","cash":"￥5,000.00","appendRowHtml":'<div class="appendRowContent">查看账单：<a>2012年12月</a>&nbsp;&nbsp;<a>2012年10月</a>&nbsp;&nbsp;<a>2012年9月</a>&nbsp;&nbsp;<a>2012年8月</a>&nbsp;&nbsp;<a>2012年7月</a>&nbsp;&nbsp;<a>历史账单</a></div>'},
  {"bank":"平安银行","card":"平安银行信用卡（0496）","id":126,"billDay":"7日","repayDay":"28日","cash":"￥10,000.00","appendRowHtml":'<div class="appendRowContent">查看账单：<a>2012年12月</a>&nbsp;&nbsp;<a>2012年10月</a>&nbsp;&nbsp;<a>2012年9月</a>&nbsp;&nbsp;<a>历史账单</a></div>'},
  {"bank":"招商银行","card":"招商银行信用卡（0544）","id":127,"billDay":"20日","repayDay":"25日","cash":"￥12,000.00","appendRowHtml":'<div class="appendRowContent">查看账单：<a>2012年12月</a>&nbsp;&nbsp;<a>2012年7月</a>&nbsp;&nbsp;<a>历史账单</a></div>'},
  {"bank":"招商银行","card":"招商银行信用卡（6782）","id":128,"billDay":"15日","repayDay":"25日","cash":"￥15,000.00","appendRowHtml":'<div class="appendRowContent">查看账单：<a>2012年12月</a>&nbsp;&nbsp;<a>2012年3月</a>&nbsp;&nbsp;<a>历史账单</a></div>'}
  ]}
   
   //数据表格使用
    var g;
	function initComplete(){
		 g = $("#maingrid").quiGrid({
            columns: [ 
                { display: '银行', name: 'bank', align: 'center',  width: 200},
                { display: '信用卡', name: 'card', align: 'center' , width: "30%"},
                { display: '账单日', name: 'billDay',  align: 'center' , width: "30%"},
                { display: '还款日', name: 'repayDay',  align: 'center', width: "20%" },
                { display: '取现额度', name: 'cash',  align: 'center', width: "20%" }
            ], data:testData, pageSize: 10, rownumbers:true, checkbox:true,percentWidthMode:true,
            height: '100%', width:"100%",alternatingRow:false,rowHeight:45,headerRowHeight:45
            
            
        });
	}
    
</script>	
</body>
</html>